<template>
  <a-modal
    :visible="visible"
    :title="title"
    :confirmLoading="confirmLoading"
    :destroyOnClose="true"
    :maskClosable="false"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form-model
      ref="rulesForm"
      :model="form" :label-col="labelCol" :wrapper-col="wrapperCol"
      :rules="rules"
    >
      <a-form-model-item label="票据类型" prop="invoiceType">
        <a-select v-model="form.invoiceType">
          <a-select-option key="">请选择</a-select-option>
          <a-select-option :key="1">增值税专用发票</a-select-option>
          <a-select-option :key="2">增值税普通发票</a-select-option>
          <a-select-option :key="3">其它票据</a-select-option>
          <a-select-option :key="4">不开票</a-select-option>
        </a-select>
      </a-form-model-item>
      <template v-if="form.invoiceType !== 4">
        <a-form-model-item label="票据号">
          <a-input v-model="form.invoiceNo" :max-length="50"/>
        </a-form-model-item>
        <a-form-model-item :label="`${invoiceInout}项目`">
          <a-input v-model="form.project" :max-length="20"/>
        </a-form-model-item>
        <a-form-model-item :label="`${invoiceInout}日期`" prop="invoiceDate">
          <a-date-picker :value="invoiceDateMoment" @change="onChangeInvoiceDate" :disabled-date="disabledDate"><a-icon slot="suffixIcon" type="calendar" /></a-date-picker>
        </a-form-model-item>
        <a-form-model-item :label="`${invoiceInout}金额(含税)`" prop="amount">
          <a-input-number v-model="form.amount" :min="0" :precision="2" :max="999999999999.99"/> {{amountType}}
        </a-form-model-item>
        <a-form-model-item label="税额" prop="taxAmount">
          <a-input-number v-model="form.taxAmount" :min="0" :precision="2" :max="999999999999.99"/>
        </a-form-model-item>
        <a-form-model-item label="税点" prop="taxRate">
          <a-input-number v-model="form.taxRate" :min="0" :precision="2" :max="999999999999.99"/> %
        </a-form-model-item>
        <a-form-model-item label="发票图片" prop="invoicePic" style="margin-bottom:0">
          <upload :uploadName="'invoicePic'"
            :fatherList="form.invoicePic ? form.invoicePic.split(',') : []"
            :length="1"
            @uploadFile="uploadFile"
          ></upload>
        </a-form-model-item>
      </template>
    </a-form-model>
  </a-modal>
</template>

<script>
import moment from 'moment'
import upload from '@/components/UpLoad'
import {addBillInvoice, updateBillInvoice} from '@/api/financialCenter'
const fomrMessage = `必填项不能为空`
const defaultForm = () => ({
  id: null,
  invoiceType: '', // 1增值税专用发票，2增值税普通发票，3其它票据 4不需要开票
  invoiceNo: '', // 发票号
  project: '', // 项目
  invoiceDate: '', // 开票日期
  amount: '', // 开票金额
  taxAmount: '', // 税额
  taxRate: '', // 税点
  invoicePic: ''
})

export default {
  props: {
    visible: Boolean,
    data: Object
  },
  data () {
    return {
      labelCol: {span: 8},
      wrapperCol: {span: 14},
      confirmLoading: false,
      form: defaultForm(),
      isPayOrRecevie: false,
      rules: {
        invoiceType: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        invoiceDate: [{required: true, message: fomrMessage, trigger: ['blur', 'change']}],
        amount: [{required: true, message: fomrMessage, trigger: 'blur'}],
        taxAmount: [{required: true, message: fomrMessage, trigger: 'blur'}],
        taxRate: [{required: true, message: fomrMessage, trigger: 'blur'}],
        invoicePic: [{required: true, message: fomrMessage, trigger: 'blur'}]
      }
    }
  },
  components: {
    upload
  },
  computed: {
    title () {
      return this.data.id ? '编辑发票' : '添加发票'
    },
    amountType () {
      return this.data.currencyType === 'CNY' ? 'RMB' : (this.data.currencyType === 'USD' ? 'USD 汇率:' + this.data.rate : '?')
    },
    invoiceDateMoment () {
      return this.form.invoiceDate === '' ? null : moment(this.form.invoiceDate)
    },
    invoiceInout () {
      return this.isPayOrRecevie ? '收票' : '开票'
    }
  },
  methods: {
    uploadFile (e) {
      this.form.invoicePic = e
    },
    onChangeInvoiceDate (date, dataStr) {
      this.form.invoiceDate = dataStr
    },
    disabledDate (current) {
      // Can not select days before today and today
      return current > moment().endOf('day')
    },
    handleOk () {
      this.$refs.rulesForm.validate(valid => {
        if (valid) {
          this.confirmLoading = true
          if (this.form.id) {
            updateBillInvoice(this.form).then(rsp => {
              this.$message.success('更新成功')
              this.$emit('setData', true)
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          } else {
            addBillInvoice(this.form).then(rsp => {
              this.$message.success('添加成功')
              this.$emit('setData', true)
              setTimeout(() => { this.confirmLoading = false }, 1000)
            }).catch(() => { this.confirmLoading = false })
          }
        }
      })
    },
    handleCancel () {
      this.$emit('setData')
    }
  },
  watch: {
    visible () {
      if (this.visible) {
        if (this.data.id) {
          Object.assign(this.form, this.data)
        } else {
          Object.assign(this.form, this.data, defaultForm())
        }
        this.isPayOrRecevie = this.data.isPayOrRecevie
      }
    }
  }
}
</script>

<style lang="less" scoped>

</style>
